
<template>
    <view class="content">
		<view class="uv-demo-block mx-1">
				<uv-swiper 
					:list="listBanner" 
					@change="e => current1 = e.current" 
					@click="clickBanner"
					:interval="interval" :autoplay="autoplay"
					height="180">
					<template v-slot:indicator>
						<view class="indicator">
							<view class="indicator__dot" 
								v-for="(item, index) in listBanner" 
								:key="index" 
								:class="[index === current1 && 'indicator__dot--active']"
							></view>
						</view>
					</template>
				</uv-swiper> 
			</view>
			
			<view class="d-flex flex-wrap j-start mx-3  mb-2 mt-2">
				<view v-for="(item,index) in categoryData" :key="index"  class="nav-list span24-8 mt-1" @click="navIcon(item)">
					<image class="d-block" :src="item.iconUrl"></image>
					<text  class="d-block ">{{item.title}}</text>
				</view>  
			</view>
			
			

        <!--  proList: 条目数组数据  goProDetail:条目点击事件跳转（实现了点击条目数据传值）-->
        <cc-waterListView :proList="projectList" @click="goProDetail"></cc-waterListView>

    </view>
</template>

<script> 
 import { getBannerList,getTvCategory,getTheaterList } from "@/common/api/theater.js"
    export default {
      components: {
		 
		},
        data() {
            return {
				current1: 0,
				interval:4000,
				autoplay:true,
				listBanner: [],
				categoryData:[],
                // 列表数组
                projectList: []
            }
        },
        mounted() { 
            this.requestData();
        },
		onPullDownRefresh() {
		      console.log('onPullDownRefresh');
		      setTimeout(function () {
		          uni.stopPullDownRefresh();
		      }, 1000); 
		  }, 		// 上拉加载
		 onReachBottom: function() {
			 console.log('上拉加载');	
		},
		onLoad() {
				this.init()
		},
		onShow() {
		
		},
        methods: {
			navIcon(e){
				console.log(e)
				if(e.sort == 1){
					uni.navigateTo({
						url:"/pages/theatre/hot"
					})
				}
			},
		init() {
		 getBannerList({
		 	page: 1,
		 	pageSize: 5
		 }).then(res => {
			 let img = []
			 for (let i in res.result.records) {
				 img.push(res.result.records[i].imgPath)
			 }
			  this.listBanner = img
		 })
		 getTvCategory({ 
		 }).then(res => {
		 		this.categoryData = res.result.records
		 })
		 
		 
		 },
		 clickBanner(e){
			 console.log(e)
		 }, 
            // 列表条目点击事件
            goProDetail(item) {
				console.log(item)
                console.log("条目数据 = " + JSON.stringify(item));
            /*    uni.showModal({
                    title: '选择条目',
                    content: '选择条目数据 = ' + JSON.stringify(item)
                }) */
				uni.navigateTo({
					url:"/pages/theatre/video?classId="+item.id+"&title="+item.title
				})
            },

            requestData() { 
				getTheaterList({
					page: 1,
					pageSize: 5
				}).then(res => {
							 let records = res.result.records
							 for (let i in records) {
								 records[i].proImg = records[i].coverImg
								 records[i].proName = records[i].title 
							 }  
					 this.projectList = records;
				})

                // 模拟请求参数设置
               /* let reqData = {
                    'area': '',
                    "pageSize": 10,
                    "pageNo": this.curPageNum
                } */
                // 模拟请求接口
              /*  this.totalNum = 39;
                this.projectList = [];
                let imgArr = [
                    'https://images.pexels.com/photos/7214784/pexels-photo-7214784.jpeg?auto=compress&cs=tinysrgb&w=800',
                    'https://cdn.pixabay.com/photo/2014/07/08/14/14/resolution-387446_1280.jpg',
                    'https://images.pexels.com/photos/5202162/pexels-photo-5202162.jpeg?auto=compress&cs=tinysrgb&w=800',
                    'https://images.pexels.com/photos/4967533/pexels-photo-4967533.jpeg?auto=compress&cs=tinysrgb&w=800',
                    'https://images.pexels.com/photos/8679339/pexels-photo-8679339.jpeg?auto=compress&cs=tinysrgb&w=800',
                    'https://images.pexels.com/photos/209339/pexels-photo-209339.jpeg?auto=compress&cs=tinysrgb&w=800'
                ]

                let nameArr = ['冰糖心苹果 红富士大果出售 应季水果 繁荣种植园', '农鲜洛川红富士苹果16枚，单果160g,新鲜饱满水分充足', '甜醉了 烟台苹果栖霞红富士新鲜水...',
                    '惠寻 山东烟台红富士苹果12枚 果径...'
                ]
                for (let i = 0; i < 20; i++) {

                    this.projectList.push({
                        'proImg': imgArr[i % 6],
                        'proName': nameArr[i % 4],
                        'proDetail': '我是产品详情' + i,
                        'proPrice': 60 + 6 * i + '元',
                        'status': (i % 3 == 0) ? '618' : '',
                        'id': i + ''
                    });
                } */
				
				
				
            }
        }
    }
</script>
<style lang="scss">
    page { 
        background-color: #f7f7f7;
    }

    .content {
        display: flex;
        flex-direction: column;

    }
 
	.nav-list image{width: 114rpx;height:117rpx;margin: 0 auto;}
	.nav-list text{text-align: center;}
	 

    .mui-content-padded {
        margin: 0px 14px;
        /* background-color: #ffffff; */
    } 
	@mixin flex($direction: row) {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: $direction;
		}
		.indicator {
			@include flex(row);
			justify-content: center;
			&__dot {
				height: 6px;
				width: 6px;
				border-radius: 100px;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 5px;
				transition: background-color 0.3s;
				&--active {
					background-color: #ffffff;
				}
			}
		}
		.indicator-num {
			padding: 2px 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100px;
			width: 35px;
			@include flex;
			justify-content: center;
			&__text {
				color: #FFFFFF;
				font-size: 12px;
			}
		}
</style>